<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="picture">
        <img src="super_small_2b.png" alt="">
        <input type="button" name="" value="全屏" id="Full">
        <input type="button" name="" value="取消全屏" id="cancelFull">
        <input type="button" name="" value="是否全屏" id="isFull">
    </div>
    <script>
        // 全屏操作的主要方法：
        // 1. requestFullScreen() 开启全屏
        //    不同浏览器需要添加不同的前缀
        //    chrome:webkit   firefox:moz  ie:ms   opera:o   ie不支持
        // 2. cancelFullScreen() 取消全屏 
        //    取消全屏得通过ducument来实现
        // 3. fullScreenElement 是否为全屏状态
        //    通过document来判断
        window.onload= function(){
            var picture = document.querySelector("#picture");
            // 添加三个按钮的点击事件
            // 全屏操作
            document.querySelector("#Full").onclick = function(){
                //通过能力测试来设置 全屏
                if (picture.requestFullScreen) {
                    picture.requestFullScreen();
                }else if (picture.webkitRequestFullScreen) {
                    picture.webkitRequestFullScreen();
                }else if(picture.mozRequestFullScreen){
                    picture.mozRequestFullScreen();
                }else if(picture.msRequestFullScreen){
                    picture.msRequestFullScreen();
                }else if(picture.oRequestFullScreen){
                    picture.oRequestFullScreen();
                }
            }
            
            // 退出全屏
            document.querySelector("#cancelFull").onclick = function(){
                if (document.cancelFullScreen) {
                    document.cancelFullScreen();
                }else if (document.webkitCancelFullScreen) {
                    document.webkitCancelFullScreen();
                }else if(document.mozCancelFullScreen){
                    document.mozCancelFullScreen();
                }else if(document.msCancelFullScreen){
                    document.msCancelFullScreen();
                }else if(document.oCancelFullScreen){
                    document.oCancelFullScreen();
                }
            };
        
            // 是否全屏
            document.querySelector("#isFull").onclick = function(){
                if (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement ||document.msFullscreenElement || document.oFullscreenElement ) {
                    alert("true");
                }else {
                    alert("false");
                }
            }
        }
    </script>
    
</body>
</html>